<template>
  <div>
    <el-calendar v-model="rbDate">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div class="full-block" @click="showRbDetails(data.day)">
          {{ data.day.split("-").slice(1).join("-") }}
          <el-tag type="danger" v-if="qjData.includes(data.day)">
            日报缺交
          </el-tag>
        </div>
      </template>
    </el-calendar>
    <el-dialog title="日报详情" :visible.sync="dialogVisabled" width="50%">
      <p>今日工作总结:</p>
      <div style="text-indent: 2em">
        {{ rbData?.jrzj || "" }}
      </div>
      <p>明日工作计划：</p>
      <div style="text-indent: 2em">
        {{ rbData?.mrjh || "" }}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    qjData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    rbDate(val, oldVal) {
      const month = moment(val).format("MM");
      const oldMonth = moment(oldVal).format("MM");
      this.oldMonth = oldMonth;
      if (oldMonth == month) return;
      this.$emit("getQk", month);
    },
  },
  data() {
    return {
      rbDate: new Date(),
      rbData: {},
      dialogVisabled: false,
      oldMonth: moment(new Date()).format("MM"),
    };
  },
  methods: {
    showRbDetails(row) {
      if (this.oldMonth != moment(row).format("MM")) {
        return false;
      }
      if (this.qjData.includes(row)) {
        return false;
      }
      this.$emit("checkDetail", row);
    },
    openRbDialog(data) {
      this.dialogVisabled = true;
      this.rbData = data;
    },
    setDate(year) {
      const nowDate = new Date();
      this.rbDate = new Date(year, nowDate.getMonth(), 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.full-block {
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0;
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
}
</style>
